<template>
  <div class="box">
    <header class="header">
      <van-sticky>
        <van-nav-bar
          left-arrow
          :border="false"
          @click-left="$router.go(-1)"
          @click-right="onClickRight"
        >
          <van-icon slot="right" name="ellipsis" size="0.27rem" color="#000" />
        </van-nav-bar>
      </van-sticky>
      <div class="stranger-info">
        <img src="@/assets/img/109951164627305702.jpg" alt="">
        <h3>晋祠阿芙蓉 <i class="avatar"></i></h3>
        <p><span>0</span>&nbsp;关注<span>1</span>&nbsp;粉丝</p>
        <!-- 未关注 class为 attented -->
        <button>已关注</button>
      </div>
      <div style="height: 0.085rem; width: 100%; background-color: #F6F7F9;"></div>
      <div class="statistics">
        <p>记账成就</p>
        <ul>
          <li>
            <p>3天</p>
            <span>已连续打卡</span>
          </li>
          <li>
            <p>112天</p>
            <span>记账总天数</span>
          </li>
          <li>
            <p>265笔</p>
            <span>记账总笔数</span>
          </li>
        </ul>
      </div>
      <div style="height: 0.085rem; width: 100%; background-color: #F6F7F9;"></div>
      <div class="list-content">
        <van-tabs v-model="active" line-width="0.14rem" line-height="0.04rem" color="#FDD949" title-inactive-color="rgba(28, 28, 28, .65)">
          <van-tab title="帖子 ·500">
            <PostList :postlist="list" :loading="loading" :goComment="goCommentDefault" />
          </van-tab>
          <van-tab title="收藏 ·20">
            <PostList :postlist="list" :loading="loading" :goComment="goCommentDefault" />
          </van-tab>
        </van-tabs>
      </div>
      <van-action-sheet v-model="show" :round="false" cancel-text="取消"  @cancel="onCancel" @select="onSelect" :actions="actions" />
    </header>
  </div>
</template>

<script>
import Vue from 'vue'
import { Sticky, NavBar, Icon, Tab, Tabs, ActionSheet, Toast } from 'vant'
import PostList from '@/components/community/postList'

Vue.use(Sticky)
Vue.use(NavBar)
Vue.use(Icon)
Vue.use(Tab)
Vue.use(Tabs)
Vue.use(ActionSheet)
Vue.use(Toast)

export default {
  components: {
    PostList
  },
  data () {
    return {
      show: false,
      actions: [
        { name: '举报', color: '#1C1C1C' }
      ],
      loading: true,
      active: 0,
      list: [
        { id: 1, nickname: '霍斯特哥若1', time: '04-21 21:32', img: require('@/assets/img/109951164627305702.jpg'), text: '我的美好第一天，小懒猪记账~我的美好第一天，小懒猪记账~我的美好第一天，小懒猪记账~我的美好第一天，小懒猪记账~我的美好第一天，小懒猪记账~我的美好第一天，小懒猪记账~', containImg: require('@/assets/img/109951164286019220.jpg'), type: '记账打卡记账打卡记账打卡记账打卡记账打卡记账打卡', zf: 20, pl: 32, dz: 55, xz: 1, gz: 0, sc: 0 },
        { id: 2, nickname: '霍斯特哥若2', time: '04-21 21:33', img: require('@/assets/img/109951164627305702.jpg'), text: '我的美好第二天，小懒猪记账~', containImg: require('@/assets/img/109951164286019220.jpg'), type: '记账打卡', zf: 21, pl: 33, dz: 56, xz: 0, gz: 1, sc: 0 },
        { id: 3, nickname: '霍斯特哥若3', time: '04-21 21:34', img: require('@/assets/img/109951164627305702.jpg'), text: '我的美好第三天，小懒猪记账~', containImg: require('@/assets/img/109951164286019220.jpg'), type: '记账打卡', zf: 22, pl: 34, dz: 57, xz: 1, gz: 1, sc: 1 },
        { id: 4, nickname: '霍斯特哥若4', time: '04-21 21:35', img: require('@/assets/img/109951164627305702.jpg'), text: '我的美好第四天，小懒猪记账~', containImg: require('@/assets/img/109951164286019220.jpg'), type: '记账打卡', zf: 23, pl: 35, dz: 58, xz: 0, gz: 0, sc: 0 },
        { id: 5, nickname: '霍斯特哥若5', time: '04-21 21:36', img: require('@/assets/img/109951164627305702.jpg'), text: '我的美好第五天，小懒猪记账~', containImg: require('@/assets/img/109951164286019220.jpg'), type: '记账打卡', zf: 24, pl: 36, dz: 59, xz: 1, gz: 1, sc: 1 },
        { id: 6, nickname: '霍斯特哥若6', time: '04-21 21:37', img: require('@/assets/img/109951164627305702.jpg'), text: '我的美好第六天，小懒猪记账~', containImg: require('@/assets/img/109951164286019220.jpg'), type: '记账打卡', zf: 25, pl: 37, dz: 60, xz: 0, gz: 0, sc: 0 }
      ]
    }
  },
  methods: {
    goCommentDefault () {
      this.$router.push({ name: 'details' })
    },
    onSelect (item) {
      if (item.name === '举报') {
        this.actions = [
          { name: '内容侵权', color: '#1C1C1C' },
          { name: '违法有害信息', color: '#1C1C1C' },
          { name: '垃圾广告营销', color: '#1C1C1C' },
          { name: '污秽色情内容', color: '#1C1C1C' },
          { name: '不实信息', color: '#1C1C1C' },
          { name: '不友善内容', color: '#1C1C1C' },
          { name: '其他', color: '#1C1C1C' }
        ]
      } else {
        // 发请求
        this.show = false
        setTimeout(() => {
          this.actions = [{ name: '举报', color: '#1C1C1C' }]
        }, 300)
      }
    },
    onCancel () {
      this.show = false
      Toast('cancel')
    },
    onClickRight () {
      this.show = true
    }
  },
  mounted () {
    // 请求数据
    this.loading = false
    this.actions = [{ name: '举报', color: '#1C1C1C' }]
  }
}
</script>

<style lang="scss" scoped>
@import '@/assets/css/community/stranger.scss';
</style>
